<template>
  <el-container>
    <el-header>
       <!-- 头部 -->
      <div class="head-left">
        <i class="el-icon-s-fold"></i>
        <span>意向学员</span>
      </div>
      <section>
        <i class="el-icon-search"></i>
        <i class="el-icon-bell"></i>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png">{{this.$store.state.loginName}}</el-avatar>
      </section>
      <!--头部结束  -->
    </el-header>
    <el-main>
      <div class="form">
        <div class="stuName">
          <h3>学员姓名：</h3>
          <el-input
            type="text"
            placeholder="请输入学生姓名，不超过20个字"
            v-model="text"
            maxlength="20"
            show-word-limit
          >
          </el-input>
        </div>
        <div class="stuSex">
          <h3>学员性别：</h3>
          <el-radio v-model="radio" label="1">男</el-radio>
          <el-radio v-model="radio" label="2">女</el-radio>
        </div>
        <div class="stuBirthday">
          <h3>出生日期：</h3>
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </div>
        <div class="stuNum">
          <h3>联系电话：</h3>
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
        <div class="stuSchool">
          <h3>咨询校区：</h3>
          <el-select v-model="value3" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value3"
              :label="item.label"
              :value="item.value3">
            </el-option>
          </el-select>
        </div>
        <div class="stuFrom">
          <h3>招生来源：</h3>
          <el-select v-model="value4" placeholder="请选择">
            <el-option
              v-for="item in options4"
              :key="item.value4"
              :label="item.label"
              :value="item.value4">
            </el-option>
          </el-select>
        </div>
        <div class="stusTate">
          <h3>跟踪状态：</h3>
          <el-select v-model="value5" placeholder="请选择">
            <el-option
              v-for="item in options5"
              :key="item.value5"
              :label="item.label"
              :value="item.value5">
            </el-option>
          </el-select>
        </div>
        <div class="stuIntention">
          <h3>意向程度：</h3>
          <el-select v-model="value6" placeholder="请选择">
            <el-option
              v-for="item in options6"
              :key="item.value6"
              :label="item.label"
              :value="item.value6">
            </el-option>
          </el-select>
        </div>
        <div class="stuParentName">
          <h3>家长姓名：</h3>
          <el-input v-model="inputParent" placeholder="请输入内容"></el-input>
        </div>
        <div class="stuAffiliation">
          <h3>所属关系：</h3>
          <el-radio-group v-model="radioA">
            <el-radio :label="3">父亲</el-radio>
            <el-radio :label="6">母亲</el-radio>
            <el-radio :label="9">其它</el-radio>
          </el-radio-group>
        </div>
        <div class="stuClue">
          <h3>线索：</h3>
          <el-input v-model="inputClue" placeholder="请输入内容"></el-input>
        </div>
        <div class="stuGroup">
          <h3>分组：</h3>
          <el-select v-model="value7" placeholder="请选择">
            <el-option
              v-for="item in options7"
              :key="item.value7"
              :label="item.label"
              :value="item.value7">
            </el-option>
          </el-select>
        </div>
        <div class="stuEntered">
          <h3>录入人：</h3>
          <el-select v-model="value8" placeholder="请选择">
            <el-option
              v-for="item in options8"
              :key="item.value8"
              :label="item.label"
              :value="item.value8">
            </el-option>
          </el-select>
        </div>
        <div class="stuBtn">
          <el-button @click="open1()">取消</el-button>
          <el-button type="danger" @click="open2()">确认</el-button>
        </div>
      </div>
    </el-main>
  </el-container>
</template>
<script>
export default {
  name: "showOff-item4-m2",
  data() {
    return {
      text:'',
      radio: '1',
      pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
      },
      value1: '',
      input: '',
      options: [
        {
          value: "宝安校区",
          label: "宝安校区",
        },
        {
          value: "南山校区",
          label: "南山校区",
        },
        {
          value: "福田校区",
          label: "福田校区",
        },
        {
          value: "罗湖校区",
          label: "罗湖校区",
        },
        {
          value: "盐田校区",
          label: "盐田校区",
        },
      ],
      value3:'',
      options4: [{
        value4: '美国',
        label: '美国'
        }, {
          value4: '日本',
          label: '日本'
        }, {
          value4: '中国台湾',
          label: '中国台湾'
        }, {
          value4: '中国香港',
          label: '中国香港'
        }, {
          value4: '韩国',
          label: '韩国'
        }
      ],
      value4:'',
      options5: [{
        value5: '即将成单',
        label: '即将成单'
        }, {
          value5: '一般',
          label: '一般'
        }, {
          value5: '跟踪中',
          label: '跟踪中'
        }
      ],
      value5:'',
      options6: [{
        value6: '满意',
        label: '满意'
        }, {
          value6: '不满意',
          label: '不满意'
        }, {
          value6: '一般',
          label: '一般'
        }
      ],
      value6:'',
      inputParent:"",
      radioA:3,
      inputClue:'',
      options7: [{
        value7: '一组',
        label: '一组'
        }, {
          value7: '二组',
          label: '二组'
        }, {
          value7: '三组',
          label: '三组'
        }
      ],
      value7:'',
      options8: [{
        value8: '李老师',
        label: '李老师'
        }, {
          value8: '王校长',
          label: '王校长'
        }, {
          value8: '张老师',
          label: '张老师'
        }
      ],
      value8:'王校长',
    };
  },
  methods:{
    open2() {
      this.$message({
        message: '恭喜你,添加成功!',
        type: 'success'
      });
    },
    open1() {
      this.$message('取消添加!');
    },
  }
  
};
</script>

<style scoped>

.el-header{
  display: flex;
  justify-content:space-between;
  align-items: center;
  padding:0 25px
}
.el-header .head-left{
  display: flex;
  align-items: center;
}
.el-header .head-left i{
  font-size:28px;
  color:#686868;
  margin-right:30px
}
.el-header .head-left span{
  font-size:14px;
  color:#686868;
}
.el-header section{
  display: flex;
  align-items: center;
}
.el-header section i{
  font-size:24px;
  color:#7a7a7a;
  margin-right:20px;
}

.form{
  padding:40px 25px;
  background: #fff;
}
.form div{
  display: flex;
  height:60px;
  align-items: center;
}
.form div h3{
  font-size:14px;
  font-weight:400;
  width:80px;
  text-align:right;
  display: block;
}
.el-input{
  width:50%;
}
.el-select {
  width: 50%;
  left:0;
}
.stuBtn{
  justify-content: center;
}
</style>


